<template>
  <el-col :span="4" class="content">
    <template v-if="dataSource.length > 0">
      <left-pane-card
        class="card"
        @itemClick="itemClick"
        v-for="(item, index) in dataSource"
        :key="'paneCard' + index"
        :item="item.data"
        :title="item.title"
      />
    </template>
    <a-empty description="暂无数据" style="padding-top: 200px;" v-else />
  </el-col>
</template>

<script>
  import LeftPaneCard from './LeftPaneCard'
  export default {
    name: 'LeftPane',
    props: {
      itemClick: {
        type: Function,
        default: () => {}
      },
      dataSource: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {}
    },
    components: {
      LeftPaneCard
    }
  }
</script>

<style lang="scss" scoped>
  .content {
    box-sizing: border-box;
    height: 540px;
    overflow-y: scroll;
    .card {
      &:nth-of-type(n + 2) {
        margin-top: 14px;
      }
    }
  }
</style>
